<template>
  <view class="searchPage">
    <!-- 顶部搜索框 -->
    <view class="box">
      <uni-search-bar v-model="str" class="bar" radius="40" cancelButton="none" @confirm="myconfirm"
        @input="myinput"></uni-search-bar>
    </view>
    <view class="thinkList" v-if="str">
      <view @tap="goDetail(item.goods_id)" class="item" v-for="(item, index) in list" :key="index">
        <text>{{item.goods_name}}</text>
        <uni-icons type="right" size="16"></uni-icons>
      </view>
    </view>
    <!-- 搜索历史 -->
    <!-- 1:按下回车时记录到历史存储，且跳转页面（商品列表）
         2:历史 记录要持久化
         3：点击清空要删除所有历史      
     -->
    <view class="history" v-else>
      <view class="title">
        <text>搜索历史</text>
        <uni-icons @click="clearEvent" type="trash"></uni-icons>
      </view>
      <view class="itembox">
        <view class="item" v-for="(item, index) in historyList" :key="index">
          {{item}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        timer: null,
        loading: false, // false:不在倒计时中  true:在倒计时中
        str: '',
        historyList: uni.getStorageSync('history') || []
      };
    },
    methods: {
      // 边输入边响应的
      // 防抖：间隔一段时间（倒计时）执行某事件，倒计时过程中再次请求执行，清除倒计时，再次重新倒计时执行
      myinput(e) {
        console.log(e);
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.getList(e)
        }, 500)
      },
      // 节流：间隔一段时间（倒计时）执行某事件，倒计时过程中再次请求执行，不理
      // myinput(e) {
      //   console.log(e);
      //   if (this.loading) {
      //     return
      //   }
      //   this.loading = true
      //   setTimeout(() => {
      //     this.loading = false
      //     this.getList(e)
      //   }, 500)
      // },
      // 调用接口获取列表数据
      async getList(query) {
        const res = await uni.http.get('/goods/search', {
          params: {
            query: query,
            pagenum: 1,
            pagesize: 20
          }
        })
        this.list = res.message.goods
        console.log('列表', res);
      },
      // 跳转到商品详情
      goDetail(id) {
        uni.navigateTo({
          url: "/pages/goods_detail/main?goods_id=" + id
        })
        // 清理
        this.str = ''
        this.list = ''
      },
      // 清空事件
      async clearEvent() {
        const res = await uni.showModal({
          title: "提示",
          content: "您确定删除搜索历史吗?"
        })
        if (res.confirm) {
          // 点击确认
          this.historyList = []
          // uni.removeStorageSync('history')
          uni.setStorageSync("history", [])
        }
        console.log(res);
      },
      // 搜索确认事件
      myconfirm() {
        if (this.str.trim() === '') {
          return
        }
        this.historyList.unshift(this.str)
        // 去重 
        // const _set = new Set(...this.historyList)
        // this.historyList = [..._set]
        // 万能去重
        this.historyList = this.historyList.filter((item, index, initArr) => {
          const _index = initArr.findIndex(i => i === item)
          return _index === index
        })
        /*
        uni.setStorageSync
        uni.getStorageSync
        uni.clearStorageSync
        uni.removeStorageSync        
        */
        uni.setStorageSync('history', this.historyList)
        // 跳转页面
        uni.navigateTo({
          url: "/pages/list/list?key=" + this.str
        })

        // [{id:1},{id:1}]
        // filter:筛选
        // let arr = [{
        //     id: 1
        //   }, {
        //     id: 1
        //   },
        //   {
        //     id: 2
        //   },
        //   {
        //     id: 1
        //   },
        //   {
        //     id: 3
        //   }
        // ]
        // arr = arr.filter((item, index, initArr) => {
        //   // item:每一项
        //   // index:当前项的下标
        //   // initArr:源数组
        //   const _index = initArr.findIndex(i => i.id === item.id)
        //   // 如果找出来的_index===index,这一项要保留
        //   // index=0   _index=0
        //   // index=1  _index=0
        //   return _index === index
        // })
        // console.log(arr);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .searchPage {
    .box {
      background-color: #c00000;
    }

    .thinkList {
      font-size: 12px;

      .item {
        display: flex;
        justify-content: space-between;
        padding: 20rpx;
        border-bottom: 1px solid #f3f3f3;

        text {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .history {
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
      padding: 0 20rpx;
      border-bottom: 1px solid #f3f3f3;
    }

    .itembox {
      display: flex;
      flex-wrap: wrap;

      .item {
        padding: 6rpx 10rpx;
        background-color: #ccc;
        margin: 20rpx;
      }
    }
  }
</style>